---
title: Apply online for a UK passport
name: Cookie banner (server side with progressive enhancement)
scenario: You need to make a choice about whether to accept cookies or not.

notes: |
  For this example, when the user makes a choice to accept or reject cookies the
  form is submitted and a page navigation occurs, with the confirmation banner
  shown on the next page.

  If the user chooses hides the confirmation banner, we progressively enhance the cookie banner to
  hide with JavaScript. If JavaScript is not enabled, the page reloads.

  The choice to accept or reject cookies will not be remembered.

  The content of the page is not important for this scenario.
---

{# This example is based of the live "Apply online for a UK passport" start page: https://www.gov.uk/apply-renew-passport #}
{% extends "layouts/full-page-example.njk" %}

{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
{% from "govuk/components/tabs/macro.njk" import govukTabs %}

{% set pageTitle = example.title %}
{% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}

{% block bodyStart %}
  {{ super() }}
  {% if cookies == "accept" or cookies =="reject" %}
    {% if cookies == "accept" %}
      {% set outcome = "You have accepted cookies." %}
    {% else %}
      {% set outcome = "You have rejected cookies." %}
    {% endif %}

    {{ govukCookieBanner({
      messages: [
        {
          text: "Your cookie preferences have been saved. " + outcome,
          role: "alert",
          actions: [
            {
              text: "Hide cookie message",
              href: currentUrl,
              type: "button",
              classes: "js-hide"
            }
          ],
          classes: "js-confirmation-banner"
        }
      ]
    }) }}
{% else %}
<form action="" method="POST">
  {{ govukCookieBanner({
    messages: [
      {
        headingText: "Cookies on this government service",
        text: "We use analytics cookies to help understand how users use our service.",
        actions: [
          {
            text: "Accept analytics cookies",
            type: "submit",
            name: "cookies",
            value: "accept"
          },
          {
            text: "Reject analytics cookies",
            type: "submit",
            name: "cookies",
            value: "reject"
          },
          {
            text: "View cookie preferences",
            href: "#"
          }
        ]
      }
    ]
  }) }}
</form>
{% endif %}
{% endblock %}

{% block beforeContent %}
  {{ govukBreadcrumbs({
    items: [
      {
        text: "Home",
        href: "/"
      },
      {
        text: "Passports, travel and living abroad",
        href: "#/browse/abroad"
      },
      {
        text: "Passports",
        href: "#/browse/abroad/passports"
      }
    ]
  }) }}
{% endblock %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <h1 class="govuk-heading-xl">{{ pageTitle }}</h1>

      <p class="govuk-body">You can apply for, renew, replace or update your passport and pay for it online.</p>

      {{ govukButton({
        text: "Start now",
        href: "#",
        classes: "govuk-!-margin-top-2 govuk-!-margin-bottom-8",
        isStartButton: true
      }) }}

      {% set moreInformationHTML %}
        <p class="govuk-body">You’ll need a debit or credit card to use this service.</p>

        <p class="govuk-body"><a class="govuk-link" href="#">It’s £9.50 cheaper</a> to apply for a passport online than by post.</p>

        <p class="govuk-body">It should take around 6 weeks to get your first UK adult passport, but it can take longer.</p>

        <p class="govuk-body">All other application types (for example, renewing a passport or getting a child passport) should take 3 weeks. It can take longer if more information is needed or your application hasn’t been filled out correctly.</p>

        <p class="govuk-body">You should use a different service if you <a class="govuk-link" href="#">need your passport urgently</a>.</p>
      {% endset %}

      {% set otherWaysToApplyHTML %}
        <p class="govuk-body">You can pick up passport application forms from your <a class="govuk-link" rel="external" href="http://www.postoffice.co.uk/branch-finder">local Post Office</a> and apply by post, or use the <a class="govuk-link" href="#">Post Office Check and Send service</a>.</p>
      {% endset %}

      {{ govukTabs({
        items: [
          {
            label: "More information",
            id: "more-information",
            panel: {
              html: moreInformationHTML
            }
          },
          {
            label: "Other ways to apply",
            id: "other-ways-to-apply",
            panel: {
              html: otherWaysToApplyHTML
            }
          }
        ]
      }) }}
    </div>

    <div class="govuk-grid-column-one-third">

      <!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->

      <aside class="app-related-items">
        <h2 class="govuk-heading-m" id="subsection-title">
          Related content
        </h2>
        <nav aria-labelledby="subsection-title">
          <ul class="govuk-list govuk-!-font-size-16">
            <li class="gem-c-related-navigation__link">
              <a class="govuk-link" href="#/get-a-passport-urgently">Get a passport urgently</a>
            </li>
            <li class="gem-c-related-navigation__link">
              <a class="govuk-link" href="#/renew-adult-passport">Renew or replace your adult passport</a>
            </li>
            <li class="gem-c-related-navigation__link">
              <a class="govuk-link" href="#/passport-fees">Passport fees</a>
            </li>
            <li class="gem-c-related-navigation__link">
              <a class="govuk-link" href="#/government/news/need-to-renew-your-british-passport-go-online">Need to renew your British passport? Go online</a>
            </li>
            <li class="gem-c-related-navigation__link">
              <a class="govuk-link" href="#/government/news/changes-to-passport-applications-for-british-nationals-living-abroad">Changes to passport applications for British nationals living abroad</a>
            </li>
          </ul>
        </nav>
      </aside>

    </div>
  </div>

  {# As the cookie banner component does not currently include JavaScript, we
    have to take care of the 'Hide' button to make progressive enhancement in
    the example functional #}
  <script type="module">
    const hideButton = document.querySelector('.js-hide')
    const cookieBanner = document.querySelector(".govuk-cookie-banner")
    const confirmationBanner = document.querySelector('.js-confirmation-banner')

    if (confirmationBanner) {
      // Shift focus to the confirmation banner
      confirmationBanner.setAttribute('tabindex', '-1')
      confirmationBanner.focus()

      confirmationBanner.addEventListener('blur', function () {
          confirmationBanner.removeAttribute('tabindex')
      })
    }

    if (hideButton) {
      hideButton.addEventListener('click', function(event) {
        cookieBanner.setAttribute('hidden', 'hidden')
        event.preventDefault()
      })
    }
  </script>
{% endblock %}
